import React from 'react';
import { Link } from 'react-router-dom';
import { BsEye, BsHeart, BsChat } from 'react-icons/bs';

const ArticleCard = ({ article }) => {
  // 格式化日期
  const formatDate = (dateString) => {
    const options = { year: 'numeric', month: 'long', day: 'numeric' };
    return new Date(dateString).toLocaleDateString('zh-CN', options);
  };

  return (
    <div className="card h-full flex flex-col hover:transform hover:scale-[1.02] transition-all duration-200">
      <div className="p-6 flex-grow">
        <div className="mb-4">
          {article.tags && article.tags.slice(0, 2).map(tag => (
            <Link
              key={tag.id}
              to={`/tags/${tag.id}`}
              className="inline-block mr-2 mb-2 text-xs bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 px-2 py-1 rounded-full"
            >
              {tag.name}
            </Link>
          ))}
        </div>
        <h3 className="text-xl font-bold mb-2 text-dark-800 dark:text-dark-200">
          <Link to={`/articles/${article.id}`} className="hover:text-primary-600 dark:hover:text-primary-400">
            {article.title}
          </Link>
        </h3>
        <p className="text-dark-600 dark:text-dark-300 mb-4 line-clamp-3">
          {article.content.replace(/<[^>]*>/g, '').substring(0, 150)}...
        </p>
      </div>
      
      <div className="p-6 border-t border-gray-100 dark:border-dark-700 mt-auto">
        <div className="flex justify-between items-center">
          <div className="flex items-center">
            <img
              src={article.author.avatar || 'https://via.placeholder.com/40'}
              alt={article.author.username}
              className="w-8 h-8 rounded-full mr-2"
            />
            <div>
              <Link
                to={`/authors/${article.author.id}`}
                className="text-sm font-medium text-dark-700 dark:text-dark-300 hover:text-primary-600 dark:hover:text-primary-400"
              >
                {article.author.username}
              </Link>
              <p className="text-xs text-dark-500 dark:text-dark-400">
                {formatDate(article.createdAt)}
              </p>
            </div>
          </div>
          <div className="flex space-x-3 text-xs text-dark-500 dark:text-dark-400">
            <div className="flex items-center">
              <BsEye className="mr-1" />
              <span>{article.views}</span>
            </div>
            <div className="flex items-center">
              <BsHeart className="mr-1" />
              <span>{article.likes}</span>
            </div>
            <div className="flex items-center">
              <BsChat className="mr-1" />
              <span>{article.commentCount}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ArticleCard; 